<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>引入bootstrap表单美化</title>
    <link rel="stylesheet" type="text/css" href="../../../resource/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="js/form_component.js"></script>
    <script type="text/javascript" language="javascript" src="../../../resource/jquery/jquery.min.js"></script>
</head>
<body>
<div class="container">
   <div id="example">

        <h3>填写表单</h3>
        <form class="form-horizontal">

            <div class="control-group">
                <label class="control-label" for="_name">姓名</label>
                <div class="controls">
                    <input type="text" id="_name" placeholder="填写姓名">
                </div>
            </div>




            <div class="control-group">
                <label class="control-label" for="_pass">密码</label>
                <div class="controls">
                    <input type="password" id="_pass" placeholder="密码">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" >类别</label>
                <div class="controls">
                    <select>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">服务</label>
                <div class="controls">

                    <!-- Multiple Checkboxes -->
                    <div>
                    <label class="checkbox inline" >
                        <input type="checkbox" value="Option one">
                       wifi
                    </label>

                    <label class="checkbox inline">
                        <input type="checkbox" value="Option two">
                      酒水
                    </label>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label">性别</label>
                <div class="controls">

                    <!-- Inline Radios -->
                    <label class="radio inline">
                        <input type="radio" value="1" checked="checked" name="group">
                      男
                    </label>
                    <label class="radio inline">
                        <input type="radio" value="2" name="group">
                      女
                    </label>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="_phone">电话</label>
                <div class="controls">
                    <input type="text" id="_phone" placeholder="电话">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="_bakinfo">备注</label>
                <div class="controls">
                    <textarea id="_bakinfo" rows="3"></textarea>
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox">记住我
                    </label>
                    <button type="submit" class="btn">Sign in</button>
                </div>
            </div>


    </form>
   </div>
</div>


<script>
    (function(){
        var obj=[
            {
               element:'input',
               label:'姓名',
               name:'user_name',
               id:'user_name',
               placeholder:'请填写您的姓名'
            },
            {
                element:'select',
                value:{'1':'一间','2':'2间','3':'三间'},
                label:'预定数量',
                name:'room_count',
                id:'room_count',
                placeholder:'房间数量'
            },
            {
                element:'textarea',
                label:'备注',
                name:'info',
                id:'info',
                placeholder:'备注信息'
            },
            {
                label:'电话',
                name:'user_phone',
                id:'user_phone',
                placeholder:'请填写您的电话'
            },
            {
                label:'电子邮件',
                name:'user_email',
                id:'user_email',
                placeholder:'请填写您的电子邮件'
            },
            {   element:'radio',
                label:'是否接收订单通知',
                value:['接收','不接收']
            },
            {
                element:'checkbox',
                label:'附带选择',
                value:{wifi:'wifi',water:'酒水'},
                id:'user_email'  //将会设置外层div id 用于筛选
            },
            {
                element:'radio',
                label:'性别',
                value:{'man':'男','woman':'女'},
                name:'sex',
                id:'user_email' //将会设置外层div id 用于筛选
            },
            {
                label:'上传照片',
                type:'file',
                name:'user_photo',
                id:'user_photo'
            },
            {
                label:'',
                type:'submit',
                name:'submit_order',
                id:'submit_order',
                value:'预定'
            }

        ];

  var formCom=new FormCom();
      var form= formCom.loadData(obj);
      $('#example').html(form);
    })();

</script>
</body>
</html>